<script setup>
import { ref } from 'vue';
import {ElDivider,ElCard,ElRow,ElCol,ElText, translate} from "element-plus";
import { useRouter} from "vue-router";
import Store from "@/store/toolStore";
const store = Store();
const router = useRouter();

const routerTo = (path)=>{
  router.push(path)
}

const cate_title = {
  fontSize: "20px",
  fontWeight: "bold"
}

const tool_card = {
  margin: "0 10px",
  boxSizing: "border-box",
  cursor: "pointer",
}

const cate = {
  marginBottom: "60px",
  background: "translate"
}

</script>

<template>
  <div style="margin-top: 80px;">
    <div v-for="(v,i) in store.options" :key="i" :style="cate" >
      <!-- 分类标题 -->
      <el-row>
        <el-text size="large" :style="cate_title">{{ v.title }}</el-text>
      </el-row>
      <el-divider></el-divider>
      <!-- 主题部分 -->
      <el-row>
        <el-col v-for="(v1,i1) in v.body" :key="i1" class="title" :span="6">
          <el-card @click="routerTo(v1.path)" :style="tool_card" :body-style="tool_card" >
            <el-row>
              <el-col :span="4">
                <el-icon >
                  <component :is="v1.icon"></component>
                </el-icon>
              </el-col>
              <el-col :span="16">
                {{ v1.title }}
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
  </div>
  </div>
</template>

<style>
   
</style>